<template>
<div class="MyData">
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" :model="searchData" class="demo-form-inline" label-position="right">
                    <el-form-item label="图斑ID">
                        <el-input v-model="searchData.landCode" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="镇街">
                        <el-select v-model="searchData.landTownCode" placeholder="选择镇街" @change="changeTownCode">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="村居">
                        <el-select v-model="searchData.landVillageCode" placeholder="选择村居" @change="changeVillageCode">
                            <el-option v-for="(item, index) in VillageOptions" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采集状态">
                        <el-select v-model="searchData.AcquisitionStateCode" placeholder="选择采集状态" @change="AcquisitionStateChange">
                            <el-option v-for="(item, index) in AcquisitionState" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="审核状态">
                        <el-select v-model="searchData.auditStatus" placeholder="选择审核状态" @change="changeAuditStatusCode">
                            <el-option v-for="(item, index) in auditStatusArr" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchInfo()" style="margin-right:10px">查询</el-button>
                        <el-button type="default" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- <el-button class="ReviewButton" type="primary"  @click="auditMore()"

        >批量审核</el-button

      > -->
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-card shadow="never" class="main-card">
                <el-col :span="6">
                    <el-card class="box-card" style="margin: 0" shadow="never" ref="ras">
                        <h3 class="page-header">请选择任务</h3>
                        <div slot="header" class="search-top">
                            <el-input placeholder="输入关键字进行过滤" class="searchText" v-model="filterText"></el-input>
                            <el-button type="primary" class="searchBtn" @click="searchMyPlan()">搜索</el-button>
                        </div>

                        <template v-for="(item, index) in plans">
                            <div class="taskList active" :key="index">
                                <el-alert :title="index+1 + ' - ' + item.planName + ' / ' + item.dataCount" :type="dataIndex === index?'success':'info'" :closable="false">
                                </el-alert>

                                <el-button v-if="dataIndex === index" @click="planSelect(item.id,index)" size="medium" class="medium" type="success">已选中</el-button>
                                <el-button v-else @click="planSelect(item.id,index)" size="medium" class="medium" type="info">未选中</el-button>
                            </div>
                            <el-divider :key="item.value"></el-divider>
                        </template>

                    </el-card>
                </el-col>

                <el-col :span="18">
                    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column prop="id" type="selection"></el-table-column>

                        <el-table-column fixed prop="landCode" label="图斑ID">
                            <template slot-scope="tableData">
                                {{ tableData.row.landId }}
                            </template>
                        </el-table-column>

                        <el-table-column align="center" prop="planName" label="所在任务">
                        </el-table-column>

                        <el-table-column prop="landName" label="地塘块命名">
                            <template slot-scope="tableData">
                                {{ tableData.row.landName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landTownName" label="镇街">
                            <template slot-scope="tableData">
                                {{ tableData.row.landTownName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landVillageName" label="村居">
                            <template slot-scope="tableData">
                                {{ tableData.row.landVillageName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="landProductArea" label="面积(亩)">
                        </el-table-column>

                        <!-- <el-table-column prop="belongsBody" label="所属主体"> </el-table-column> -->
                        <el-table-column align="center" prop="gather" label="采集状态">
                            <template slot-scope="scope">{{
                  scope.row.collectStatus == "0"
                    ? "初始"
                    : scope.row.collectStatus == "2"
                    ? "已经采集"
                    : "未采集"
                }}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="auditStatus" label="审核状态">
                            <template slot-scope="scope">
                                {{ auditStatusCn(scope.row.auditStatus) }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="auditPerson" label="审核人">
                        </el-table-column>
                        <el-table-column align="center" prop="auditDate" label="审核时间">
                        </el-table-column>

                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" @click="checkAudit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="bottom">
                        <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog title="图斑地块审核" :visible.sync="dialogStatus" :close-on-click-modal="false" width="40%" :destroy-on-close="true">
        <el-form :model="modelData" status-icon ref="modelData" :inline="false" size="normal" label-width="90px" label-position="right">
            <el-row>
                <el-col :span="24">
                    <main class="userdata">
                        <p>图斑ID: {{ modelData.landCode }}</p>
                        <p>地块名: {{ modelData.landName }}</p>
                        <p>面积(亩): {{ modelData.landArea }}</p>
                        <p>镇名: {{ modelData.landTownName }}</p>
                        <p>村名: {{ modelData.landVillageName }}</p>
                    </main>
                    <el-form-item label="审核状态" prop="name">
                        <!-- <el-input v-model="modelData.auditStatus"> </el-input> -->
                        <template>
                            <el-radio v-model="modelData.auditStatus" :label="2">通过</el-radio>
                            <el-radio v-model="modelData.auditStatus" :label="3">不通过</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="审核描述" prop="name">
                        <el-input type="textarea" v-model="modelData.auditMemo">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" @click="onSubmit()">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="图斑信息 - 审核不通过待修改" :visible.sync="LandParcelInfoVisible" width="65%">
        <!-- <PlotMsg :LandParcelInfo="LandParcelInfo" :key="LandParcelInfoVisible"></PlotMsg> -->
        <AcquisitionInterface v-if="LandParcelInfoVisible" :isShow="true" :currentTask="currentTask" :planId="planId" :spotID="spotID" :userInfo="userInfo">图斑信息采集界面</AcquisitionInterface>
    </el-dialog>

</div>
</template>

<script>
// import PlotMsg from "@/components/PlotMsg/PlotMsg";
import {mapState} from 'vuex'
export default {
    components: {
        // PlotMsg,
    },
    data() {
        return {
            spotID: "",
            planId: 0,
            AcquisitionStateCode: 0,
            AcquisitionState: [{
                    value: 0,
                    label: "全部",
                },
                {
                    value: 1,
                    label: "未采集",
                },
                {
                    value: 2,
                    label: "已采集",
                },
            ],
            auditStatusArr: [{
                    value: 0,
                    label: "全部",
                },
                {
                    value: 1,
                    label: "待审核",
                },
                {
                    value: 2,
                    label: "已通过审核",
                },
                {
                    value: 3,
                    label: "未通过审核",
                },
            ],
            dataIndex: 0,
            form: {
                week: "",
            },
            LandParcelInfo: {},
            LandParcelInfoVisible: false,
            multipleSelection: [],
            tableData: [],
            search: {
                planName: "",
                value: "",
            },

            searchData: {
                pageNumber: 1,
                pageSize: 10,
                landTownCode: "",
                landVillageCode: "",
                AcquisitionStateCode: 0,
                auditStatus: 0,
            },
            params: {
                pageNumber: 1,
                pageSize: 10,
                "collectTaskLand.auditStatus": 3,
            },
            paging: {},
            List: [],
            options: [],
            VillageOptions: [],
            townIndex: 0,
            dialogStatus: false,
            modelData: {},
            plans: [],
            filterText: "",
        };
    },
    computed: {
        ...mapState({
            taskObject: (state) => {
                return state.taskmodel.taskObject;
            },
            currentTask: (state) => {
                return state.currentTask.Task;
            },
            userInfo: (state) => {
                return state.User.userInfo;
            },
        }),
    },
    created() {
        this.selectData();
        this.planData();
    },
    watch: {
        filterText(val) {
            this.$refs.ras.filter(val);
        },
    },
    methods: {
        AcquisitionStateChange(code) {
            this.searchData.AcquisitionStateCode = code;
        },
        changeAuditStatusCode(code) {
            this.searchData.auditStatus = code;
        },
        changeTownCode(TownCode) {
            this.VillageOptions = []
            this.options.forEach((item) => {
                item.children.forEach((item) => {
                    if (item.value.substring(0, 9) === TownCode) {
                        this.searchData.landVillageCode = ''
                        this.VillageOptions.push(item)
                    }
                })
            })
            console.log(this.VillageOptions)
        },
        changeVillageCode(landVillageCode) {
            this.$set(this.searchData, 'landVillageCode', landVillageCode)
            console.log(this.searchData)
        },
        searchMyPlan() {

            if (localStorage.getItem('SYS_TYPE')) {
                this.$axios
                    .get("task/task/queryMyPlan", {
                        params: {
                            pageNumber: 1,
                            pageSize: 100,
                            auditStatus: 3,
                            keywords: this.filterText.trim(),
                            systemTypeList: localStorage.getItem('SYS_TYPE')
                        },
                    })
                    .then((res) => {
                        this.plans = res.data.list;
                    });
            }
        },
        planSelect(val, index) {
            this.planId = val;
            this.dataIndex = index
            this.$axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: {
                        "collectTaskLand.planId": val,
                        auditStatus: 3
                    },
                })
                .then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.list;
                    this.paging = res.data;
                });
        },
        planData() {

            if (localStorage.getItem('SYS_TYPE')) {
                this.$axios
                    .get("task/task/queryMyPlan", {
                        params: {
                            pageNumber: 1,
                            pageSize: 100,
                            auditStatus: 3,
                            systemTypeList: localStorage.getItem('SYS_TYPE')
                        },
                    })
                    .then((res) => {
                        this.plans = res.data.list;
                        if (this.plans.length > 0) {
                            this.planId = this.plans[0].id;
                            this.list();
                        }
                    });
            }
        },
        selectData() {
            var json = JSON.parse(
                window.localStorage.getItem("getTreeData/setAsyncVillageData")
            );
            console.log(json[0].children[0].children);
            this.options = json[0].children[0].children;
        },
        statusChange(item) {
            console.log(item);
        },
        onSearch() {},
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.list();
        },
        currentchange(pageNumber) {
            this.params.pageNumber = pageNumber;
            this.list();
        },
        auditStatusCn(index) {
            var Status = {
                0: "初始状态",
                1: "待审核",
                2: "审核通过",
                3: "审核失败",
            };

            return Status[index];
        },
        list() {
            if (this.planId == 0) {
                this.$message.error("您未选中任务");
                return;
            }
            this.params["collectTaskLand.planId"] = this.planId;
            this.$axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: this.params,
                })
                .then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.list;
                    this.paging = res.data;
                });
        },
        reset() {
            this.searchData = {
                pageNumber: 1,
                pageSize: 10,
                landTownCode: "",
                landVillageCode: ""
            };
            this.VillageOptions = []
            this.isresetPaging = true;
            // this.searchInfo();
        },
        searchInfo() {
            if (this.planId == 0) {
                this.$message.error("您未选中任务");
                return;
            }
            let params = {
                "collectTaskLand.planId": this.planId,
                "landInfo.landCode": this.searchData.landCode,
                "landInfo.landName": this.searchData.landName,
                "landInfo.landTownCode": this.searchData.landTownCode,
                "landInfo.landVillageCode": this.searchData.landVillageCode,
                // "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
                // "landInfo.landProduct": this.searchData.landProduct,
                // subjectName: this.searchData.subjectName,
                "collectTaskLand.auditStatus": this.searchData.auditStatus,
                "collectTaskLand.collectStatus": this.searchData.AcquisitionStateCode,
            };

            if (this.searchData.auditStatus === 0) {
                delete params["collectTaskLand.auditStatus"];
            }

            if (this.searchData.AcquisitionStateCode === 0) {
                delete params["collectTaskLand.AcquisitionStateCode"];
            }

            this.$axios
                .get("rbac/data/CollectTaskLand/list", {
                    params: params
                })
                .then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.list;
                    this.paging = res.data;
                });
        },
        onSubmit() {
            this.dialogStatus = false;
            this.$confirm("是否确认操作?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    //发送审核请求
                    this.$axios
                        .post("rbac/LandSubject/audit", {
                            params: {
                                id: this.modelData.id,
                                landCode: this.modelData.landCode,
                                auditStatus: this.modelData.auditStatus,
                                auditMemo: this.modelData.auditMemo,
                            },
                        })
                        .then((result) => {
                            this.list();
                            this.$message.success("操作完成");
                        });
                })
                .catch(() => {});
        },

        checkAudit(row) {
            this.spotID = row.landId
            this.spotID = row.landId
            this.LandParcelInfoVisible = true;
            // this.modelData = row;
            // this.dialogStatus = true;
            // this.LandParcelInfoVisible = true;
            // this.LandParcelInfo = row.landInfo[0];
            // console.log(this.LandParcelInfo);
            // this.modelData = row;
            // this.dialogStatus = true;
        },

        auditMore() {
            console.log(this.selectedData);
            var val = this.selectedData;
            this.$confirm("是否批量审核?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    if (val) {
                        val.forEach(function (item) {
                            console.log(item.id);
                            //发送审核请求
                            this.$axios
                                .post("rbac/LandSubject/audit", {
                                    params: {
                                        id: item.id,
                                        landCode: item.landCode,
                                        auditStatus: 2,
                                    },
                                })
                                .then((result) => {
                                    this.list();
                                    this.$message.success("审核完成");
                                });
                        });
                    }

                })
                .catch(() => {});
        },
        openn() {
            this.$alert("这是一段内容", "标题名称", {
                confirmButtonText: "确定",
                callback: (action) => {
                    this.$message({
                        type: "info",
                        message: `action: ${action}`,
                    });
                },
            });
        },
        handleSelectionChange(val) {
            this.selectedData = val;
        },
    },
};
</script>

<style lang="scss">
.checkdata {
    background: #fff;
    padding: 15px;

    .ReviewButton {
        margin: 10px 0;
    }

    .cell {
        display: flex;
        justify-content: space-around;

        .el-button {
            margin: 0 5px;
        }
    }

    .subject {
        display: flex;
    }
}
</style>
